{extend name="$BASE_LIST" /}
{block name="body"}
<div class="right-main ui-form">
    <div class="page_nav" id="js_page_nav"><span class="page_title">视频管理</span></div>       
    <div id="js_main_header" class="main_header">
        <div>
            <span>
                <select name="video_class_id" id="video_class_id" class="form-control" style="width:160px">
                    <option value="">所有分类</option>
                    {volist name="class_id" id="class"}
                    <option value="{$class.id}">{$class.video_class_name}</option>
                    {/volist}
                </select>
            </span>
            <span class="frm_input_box search append">
                <a href="javascript:void(0);" id="js_search" class="frm_input_append">
                    <i class="icon wb-search" title="搜索"></i>
                </a>
                <input type="text" id="js_keyword" placeholder="请输入标题" value="" class="frm_input" />
            </span>
            <span class="right">       
                <button type="button" id="js_addBtn" class="btn btn-primary"><i class="icon wb-plus"></i> 添加视频</button>
            </span>
        </div>
    </div>    
    <table id="grid-table"></table>  

</div>
{/block}
{block name="script"}

<script type="text/javascript">
    var oss_path = "{:config('aliyunoss')['host']}"+'/';
    function formatOper(value, row, index) {
        var html = '<span class="grid-operation">';
        html += '<button type="button" onclick="edit(' + row['id'] + ')" class="btn btn-xs btn-default view-btn"><i class="icon wb-edit"></i>编辑</button>';
        html += '<button type="button" onclick="del(' + row['id'] + ')" class="btn btn-xs btn-default del-btn"><i class="icon wb-close"></i>删除</button>';
        html += '</span>';
        return html;
    }
    $(function () {
        $('#grid-table').datagrid({
            url: getURL('loadList'),
            method: "GET",
            height: getGridHeight(),
            singleSelect: false,
            remoteSort: false,
            rownumbers: true,
            multiSort: true,
            emptyMsg: '<span>无相关数据</span>',
            pagination: true,
            pageSize: 10,
            columns: [[
                    {field: 'alias_name', title: '文件别名', width: 140, align: 'center', sortable: true},
                    {field: 'video_class_name', title: '视频分类名称', width: 110, align: 'center', sortable: true},
                    {field: 'video_time', title: '视频时长', width: 140, align: 'center', sortable: true},
                    {field: 'file_size', title: '文件大小', width: 110, align: 'center', sortable: true},
                    {field: 'file_path', title: '预览', width: 200, align: 'center', sortable: true,formatter:formatVideoReview},
                    {field: 'update_time', title: '更新时间', width: 140, align: 'center', sortable: true},
                    {field: '_oper', title: '操作', width: 200, align: 'center', sortable: true, formatter: formatOper}
                ]]
        });


        //设置分页控件 
        var p = $('#grid-table').datagrid('getPager');
        $(p).pagination({
            pageSize: 10, //每页显示的记录条数，默认为10 
            pageList: [10, 20, 30]
        });

    });
    
    function formatVideoReview(value, row, index){
        var html = '<div class="img_box"><img style="height:100px;" src="'+ oss_path +row['file_path'] + '?x-oss-process=video/snapshot,t_5000,f_jpg,w_800,h_600,m_fast" />  </div>';
        return html;
    }
    
    function join_log(id){
        var url = getURL('join_log', 'rule_id=' + id );
        openBarWin('参与记录', 850, 600, url, function () {
//            reload();
        }, []);
    }
    
    function appr(id){
        confirm("确认通过审核吗？", function () {
            var url = getURL('appr');
            $.getJSON(url, {id: id}, function (json) {
                if (json.success)
                    reload();
                else
                    alert(json.message);
            });
        });
    }

    function formatStatus(val) {
        var text = '<span style="color:red">未审核 </span>';
        if (val == 1) {
            text = '<span style="color:green">已审核</span>';
        } else if (val == 2) {
            text = '<span style="color:green">反审核</span>';
        } else if (val == 3) {
            text = '<span style="color:red">已结束</span>';
        }
        return text;
    }

    function formatBool(val) {
        var text = '否';
        if (val == 1) {
            text = '是';
        }
        return text;
    }

    $("#col_main").resize(function () {
        $('#grid-table').datagrid('resize', {
            height: getGridHeight()
        });
    });

    $("#js_addBtn").click(function () {
        var url = getURL('edit');
        openBarWin('添加', 850, 520, url, function () {
            reload();
        });
    });
    

    function edit(id, act) {
        var url = getURL('edit', 'id=' + id + '&act=' + act);
        openBarWin('编辑', 600, 520, url, function () {
            reload();
        }, ['保存', '取消']);
    }

    function del(id) {
        confirm("删除后无法复原,确认要删除此数据吗？", function () {
            var url = getURL('del');
            $.getJSON(url, {id: id}, function (json) {
                if (json.success)
                    reload();
                else
                    alert(json.message);
            });
        });
    }

    $("#js_search").click(function () {
        reload();
    });
    
    $("#video_class_id").change(function(){
        reload();
    })

    function reload() {
        var video_class_id = $("#video_class_id").val();
        var keyword = $("#js_keyword").val();
        $('#grid-table').datagrid('reload', {
            keyword: keyword,
            video_class_id: video_class_id
        });
    }

</script>
{/block}